<template>
  <el-menu :router="true">
    <el-submenu v-for="menu in menus" :index="menu.key" :key="menu.key">
      <template slot="title">
        <Iconfont :name="menu.icon" wrapperClass="left-menu-icon" />{{menu.title}}
      </template>
      <el-menu-item
        v-for="child in menu.childs"
        :index="child.route"
        :key="`${menu.key}-${child.route}`"
      >
        {{child.title}}
      </el-menu-item>
      <el-menu-item-group
        v-if="menu.group"
        v-for="cell in menu.group"
        :title="cell.title"
        :key="`${menu.key}-${cell.title}`"
      >
        <el-menu-item
          :index="cellChild.route"
          v-for="cellChild in cell.childs"
          :key="`${cell.title}-${cellChild.route}`"
        >
          {{cellChild.title}}
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
import menus from 'config/menus'
import Iconfont from './Iconfont'

export default {
  name: 'LeftMenu',
  computed: {
    menus() {
      return menus
    },
  },
  components: {
    Iconfont,
  },
  methods: {
    // select(index) {
    //   console.log(index)
    // },
  },
}
</script>

<style>
.left-menu-icon {
  padding-right: 6px;
}
</style>
